<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>入库信息</title>
    <%-- 引入vue的js --%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%-- 引入element的js --%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <%-- 引入elementui的样式 --%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-form :inline="true" :model="purchasebookform" class="demo-form-inline">
        <el-form-item label="书籍编号">
            <el-input v-model="purchasebookform.staffId" placeholder="请输入书籍编号"></el-input>
        </el-form-item>
        <el-form-item label="书籍名称">
            <el-input v-model="purchasebookform.staffName" placeholder="请输入书籍名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="success" @click="Ware">上架书籍</el-button> <!-- 修改这里 -->
        </el-form-item>
    </el-form>
    <el-table
            :data="purchase"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="书籍编号"
        ></el-table-column>
        <el-table-column
                prop="purchaseInfo.purchaseData"
                label="购买日期">
        </el-table-column>
        <el-table-column
                prop="staff.staffname"
                label="操纵人员"
        ></el-table-column>
        <el-table-column
                prop="booksName"
                label="书籍名称">
        </el-table-column>
        <el-table-column
                prop="bookPrice"
                label="书籍价格">
        </el-table-column>
        <el-table-column
                prop="booksCount"
                label="书籍数量">
        </el-table-column>
        <el-table-column
                prop="booktype.booktypes"
                label="书籍类型">
        </el-table-column>

        <el-table-column label="状态">
            <el-button type="success" disabled>已上架</el-button>
        </el-table-column>


    </el-table>


    <!---------- 上架弹窗开始 ---------->
    <el-dialog title="上架" :model="purchases" :visible.sync="WarehousingFormVisible" center width="80%">
        <el-table
                :data="purchases"
                ref="multipleTable"
                @selection-change="handleSelectionChange"
                border
                style="width: 100%">
            <el-table-column

                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="书籍编号"
            ></el-table-column>
            <el-table-column
                    prop="purchaseInfo.purchaseData"
                    label="购买日期">
            </el-table-column>
            <el-table-column
                    prop="staff.staffname"
                    label="操纵人员"
            ></el-table-column>
            <el-table-column
                    prop="booksName"
                    label="书籍名称">
            </el-table-column>
            <el-table-column
                    prop="bookPrice"
                    label="书籍价格">
            </el-table-column>
            <el-table-column
                    prop="booksCount"
                    label="书籍数量">
            </el-table-column>
            <el-table-column
                    prop="booktype.booktypes"
                    label="书籍类型">
            </el-table-column>
            <el-table-column label="状态">
            <el-button type="info" disabled>未上架</el-button>
            </el-table-column>

        </el-table>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="WarehousingFormVisible = false" @click="toggleSelection()">取消</el-button>
            <el-button type="primary" @click="WareEnter">上架</el-button>
        </div>
    </el-dialog>
    <!---------- 上架弹窗结束 ---------->


    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            WarehousingFormVisible: false,//上架 弹窗
            current: 1,//当前页
            pageSize: 5,//每页显示的条数
            total: 0,//总条数
            purchasebookform: {
                staffId: '',
                staffName: '',
                id: '',
                purchaseData: '',
                bookname: '',
                bookprice: '',
                bookcount: '',
                booktypes: '',
                status: ''
            },
            purchase: [],
            // 购买信息
            purchases: [],
            // 定义一个Warehousing对象
            Warehousing: {
                // 员工ID
                staffId: '',
                // 员工姓名
                staffName: '',
                // 书籍ID
                id: '',
                // 购买日期
                purchaseData: '',
                // 书籍名称
                bookname: '',
                // 书籍价格
                bookprice: '',
                // 书籍数量
                bookcount: '',
                // 书籍类型
                booktypes: '',
                // 状态
                status: '',



            },
            multipleSelection:[],
            books:[]
            //获取的
        },
        //页面加载时调用
        created() {
            //加载表格数据
            this.loadTable();
        },
        methods: {
            search() {
                // 将当前页码设置为1
                this.current = 1;
                // 加载表格
                this.loadTable();
                // 打印出购买图书表单
                console.log(this.purchasebookform);
            },

            //查看上架信息
            loadTable() {
                axios.post("/purchaseBookInfo/check/" + this.current + "/" + this.pageSize, this.purchasebookform)
                    .then(result => {
                        if(result.data.code==200){
                            this.purchase = result.data.data.list
                            this.total = result.data.data.total;
                        }

                    })

                    .catch(error => {
                        console.error('Error:', error);
                    });
            },

            //上架商品
            Ware() {

                axios.post("/purchaseBookInfo/Ware", this.Warehousing)
                    .then(result => {
                        this.purchases = result.data;
                        this.WarehousingFormVisible = true;
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
            },

            //确定上架
            WareEnter() {
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    let book={
                        id:this.multipleSelection[i].id,
                        purchaseDate:new Date(),
                        booksname:this.multipleSelection[i].booksName,
                        bookPrice:this.multipleSelection[i].bookPrice,
                        bookCount:this.multipleSelection[i].booksCount,
                        booktypeId:this.multipleSelection[i].booktype.booktypeId,

                    }
                    this.books.push(book)
                }


                axios.post("/purchaseBookInfo/updatestatus",this.books).then(result => {
                       if(result.data.code==200) {
                           this.WarehousingFormVisible = false;
                           this.books=[]
                           this.loadTable();

                       }
                    })
            },


            // 取消选择
            handleSelectionChange(val) {
                // 把当前选中的元素赋值给 multipleSelection
                this.multipleSelection = val;
            },


            //每页显示的条数
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadTable();
            },

            //当前页
            handleCurrentChange(val) {
                this.current = val;
                this.loadTable();
            },


        }
    });
</script>
</html>
